<template>
  <div class="sider-toggle" :class="{ right: this.side === 'right' }" @click="onToggleClick">
    <a-icon :type="direction" />
  </div>
</template>

<script>
export default {
  name: 'SiderToggle',
  props: {
    side: {
      type: String,
      default: 'left',
    },
  },
  data() {
    return {
      toggled: false, // 是否已经折叠
    };
  },
  computed: {
    direction() {
      if (this.side === 'left') {
        return !this.toggled ? 'left' : 'right';
      } else {
        return !this.toggled ? 'right' : 'left';
      }
    },
  },
  methods: {
    onToggleClick() {
      this.toggled = !this.toggled;
      this.$emit('click');
    },
  },
};
</script>
<style lang="less" scoped>
.sider-toggle {
  width: 0;
  height: 100px;
  border-left: 20px solid #fff;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  filter: drop-shadow(4px 4px 2px #e4e4e4);
  cursor: pointer;
  

  .anticon {
    position: absolute;
    display: inline-block;
    top: 50%;
    left: -18px;
    width: 16px;
    height: 16px;
    margin-top: -8px;
  }

  &.right {

    border-left: none;
    border-right: 20px solid #fff;
    filter: drop-shadow(-4px 4px 2px #e4e4e4);
    .anticon {
      left: auto;
      right: -18px;
    }
  }
}
</style>
